import React from "react";
import './index.css';
import InformationBook from "../../../Component/InformationBook";
import UnlockPayment from "../../../Component/UnlockPayment";
import LoginLock from "../../../Common/svg/LoginLock";
import ChapterCatalogue from "../../../Component/ChapterCatalogue";
import Sequence from "../../../Common/svg/Sequence";
import RightSolid from "../../../Common/svg/RightSolid";
import RedStar from "../../../Component/RedStar";
import CoursewareServer from "../../../Server/Study/CoursewareServer";
import MessageUtil from "../../../utils/MessageUtil";
import UserCheck from "../../../utils/UserCheck";
import ShareLock from "../../../Common/svg/ShareLock";

export default class Courseware extends React.Component{
    
    constructor(props){
        super();
        let chapters=[];
        this.state={
            chapters:[],
        }
        CoursewareServer.SelectCoursewareChapterList()
        .then(response=>{
            CoursewareServer.SelectUnlockCourseware(UserCheck.GetUserID())
            .then(unlockResponse=>{
                let chapterID=[];
                let allUnlocked=false;
                unlockResponse.data.forEach(element => {
                    if(!allUnlocked){
                        if(element.chapterNumber==="-1"){
                            allUnlocked=true;
                        }
                        chapterID[element.chapterNumber]=element.chapterNumber;
                    }
                });
                response.data.forEach(i => {
                    let title=i.chapterTitle.split(':');

                    if(allUnlocked){
                        chapters.push(<ChapterCatalogue key={i.id} id={i.id} active={true} chapter={title[0]} catalogue={title[1]} rightIcon={<RightSolid/>}/>)
                    }
                    else{
                        if(i.chapterTitle!==null){
                            if(chapterID[i.chapterNumber]!==undefined&&chapterID[i.chapterNumber]!==null){
                                chapters.push(
                                    <div>
                                        <ChapterCatalogue key={i.id} id={i.id} active={true} chapter={title[0]} 
                                        catalogue={title[1]} rightIcon={<RightSolid/>}/>
                                    </div>
                                    );
                            }
                            else{
                                let rightIcon=this.ShareUnlock(i.chapterNumber);
                                chapters.push(
                                    <div>
                                        <ChapterCatalogue key={i.id} id={i.id} active={true} 
                                        leftIcon={<LoginLock />} chapter={title[0]} 
                                        catalogue={title[1]} rightIcon={rightIcon}/>
                                    </div>

                                )
                            }
                        }
                    }
                    this.setState({
                        chapters
                    },()=>{
                        MessageUtil.ChangeHeight();
                    });
                });
                
            });
            
        })
    }
    StartShare(chapterNumber){
        let shareDialog=document.getElementById("openShare");
        shareDialog.click();
        CoursewareServer.UnlockCourseware(UserCheck.GetUserID(),chapterNumber)
        .then(response=>{
            // MessageUtil.Reload();
        });
    }
    // 课件
    ShareUnlock(chapterNumber){
        let unlock=(
            <div onClick={e=>this.StartShare(chapterNumber)}>
                {/* <div   > */}
                <ShareLock />
            </div>
        );
            // console.log(unlock)
        return unlock;
    }
    render(){
        return(
            <div className="Courseware_Body">
                <span  id="openShare" className=" -mob-share-open"></span>
                <div className="-mob-share-ui" style={{display: "none"}}>
                            <ul className="-mob-share-list">
                                <li className="-mob-share-weibo"><p>新浪微博</p></li>
                                <li className="-mob-share-qzone"><p>QQ空间</p></li>
                                <li className="-mob-share-qq"><p>QQ好友</p></li>
                                <li className="-mob-share-douban"><p>豆瓣</p></li>
                                <li className="-mob-share-facebook"><p>Facebook</p></li>
                                <li className="-mob-share-twitter"><p>Twitter</p></li>
                            </ul>
                     <div className="-mob-share-close">取消</div>
                </div>
                <div className="Courseware_Top">
                    <div className="Courseware_Top_left">
                        <InformationBook text="AOPA资料书" subtext="更新时间:2020-05-21"/>
                    </div>
                    <div className="Courseware_Top_right">
                        <a href="/coursewarePay" target="Layout_MainContainer">
                            <UnlockPayment type="2" lefttext="支付￥1980解锁全部章节" righttext="立即支付"/>
                        </a>
                    </div>
                </div>
                <hr/>
                <div className="Courseware_Middle">
                    <div style={{marginTop:"0.2rem"}}><Sequence/></div>
                    <div className="Courseware_Middle_mulu">目录</div>
                    <div className="Courseware_Middle_right">
                        <span><RedStar /></span>
                        <span>分享好友解锁章节</span>
                    </div>
                </div>
                <div className="Courseware_bottom">
                    {
                        this.state.chapters
                    }
                </div>
            </div>
        )
    }
}
